<template>
	<view class="container">
		<u-navbar :title-bold='true' title='评论' :border-bottom='false'></u-navbar>

		<view class="card form">
			<view class="form-item">
				<textarea placeholder="评论内容" v-model="content"/>
			</view>
			<view class="pre-box">
				<view class="pre-item" v-for="(item, index) in pictures" :key="index">
					<image @click.stop="previewImage(item)" class="pre-item-image" :src="item" ></image>
					<view class="remove" @click="remove(index)">
						<image src="../../static/icon/remove.png" mode="widthFix"></image>
					</view>
				</view>		
				<u-upload v-if="!other" :custom-btn="true" :show-upload-list="false"  ref="uUpload" :action="uploadAction"
						  @on-change='upload' :max-size="5 * 1024 * 1024" max-count="6" 
						  :form-data='uploadFormData' >
						  <view slot="addBtn" class="slot-btn upload-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						  		<image src="../../static/icon/upload.png" mode="widthFix"></image>
								<view>上传图片</view>
						  </view>
				 </u-upload>
			</view>
		</view>
		<view class="next" @click="save()">提交</view>
		<u-toast ref="uToast" />		
	</view>
</template>

<script>
	import {
		sponserComment
	} from '@/api/index.js'
	export default {
		data() {
			return {
				pictures:[],
				content:"",
				uploadAction: '',
				sponser_id:0,
				uploadFormData: new Object(),
			}
		},
		onLoad(query) {
			this.uploadAction = this.ws.upload
			this.sponser_id = query.sponserId
			console.log(this.sponser_id)
			this.init()
		},
		computed: {

		},
		methods: {
			init() {
			},
			save() {
				if (!this.content) {
					this.$refs.uToast.show({
						title: '内容不能为空',
						type: 'error '
					})
					return
				};
				var obj = {
					content:this.content,
					pictures:this.pictures,
					sponser_id:this.sponser_id
				}
				sponserComment(obj).then(res => {
					if (res.code) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
						uni.redirectTo({
							url: '/pages/center/sponser'
						})
					} else {
						this.$refs.uToast.show({
							title: '提交失败' + res.msg,
							type: 'error '
						})
					}
				
				})
			},

			avatarOnSuccess: function(data, src) {
				return this.ws.imgUrl(data.data.fullurl)

			},

			// 上传成功回调
			upload(res, index, lists, name){
				res = JSON.parse(res.data);
				if(!this.pictures){
					this.pictures = [];
				}				
				this.$set(this.pictures,this.pictures.length,res.data.fullurl)
				
			},
			// 放大预览
			previewImage(url){
				uni.previewImage({
					urls: [url],
				})
			},
			// 删除
			remove(index){
				console.log(this.pictures)
				this.$delete(this.pictures,index)
			},
		}
	}
</script>

<style lang="less">
	.upload-btn{
		border-radius: 8.5px;
		border: 1rpx dashed  #b4b4b4;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		flex-flow: column;
		align-items: center;
		height: 80px;width: 80px;
		image{
			width: 35px;
			margin-bottom: 10px;
		}
	}
	.pre-box{
		padding: 20rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		.pre-item{
			width: 33.3%;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			.remove{
				position: absolute;
				z-index: 99;
				left:calc((100% - 100px)/2 + 83px);
				top: 0;
				width: 20px;height: 20px;
				image{
					width: 17px;
				}
			}
		}
		.pre-item-image {
			width: 100px;
			height: 100px;
			border-radius: 8.5px;
		}
	}
	.container {
		background: url('../../static/img/mine/header-bg.png');
		background-size: 100% 30vh;
		background-repeat: no-repeat;
		padding: 30rpx;
		background-color: #EEE;
		font-family: Microsoft JhengHei;
		font-size: 14px;
	
		.next {
			width: 90%;
			margin:30px auto;
			border-radius: 30px;
			color: #FFF;
			text-align: center;
			line-height: 50px;
			height: 50px;
			background-color: #6EC9E1;
		}

		.form {
			width: 100%;

			.form-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				input {
					padding-right: 20rpx;
					text-align: right;
				}

				.placeholder {
					display: flex;
					justify-content: flex-end;
				}
			}
		}

		.card {
			margin-top: 20rpx;
			background-color: #FFF;
			border-radius: 20rpx;
			padding: 30rpx;
		}

		.upload {
			display: flex;
			justify-content: space-around;
			text-align: center;
			padding: 20rpx 0;

			image {
				height: 190rpx;
				width: 254rpx;
				margin: 10rpx;
			}

			.image {
				height: 360rpx !important;
				width: 300rpx !important;
			}
		}


	}
</style>